<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{a}}</p>
        <p>{{b}}</p>
    </div>

        <!-- Vue.set(vm2.userProfile, 'age', 27) -->
        <!-- vm.$set(vm2.userProfile, 'age', 27) -->
        <!-- 这里就算是用vm而不用vm2.$set也可以设置到vm2中的内容 -->
    <div id="app2">
        <div v-for="(value, name, index) in userProfile">
            <p>{{name}} : {{value}}</p>
        </div>
    </div>
        <!-- 赋值多个属性 -->
        <!-- vm.userProfile = Object.assign({}, vm.userProfile, {
                age: 27,
                favoriteColor: 'Vue Green'
            }) -->

            <!-- computed遍历 和 methods遍历 -->
    <div id="app3">
        <!-- v-for实际上不用放在一个母元素上 -->
        <li v-for="n in evenNumbers">{{ n }}</li>
    </div>

    <div id="app4">
        <li v-for="n in even(numbers)">{{ n }}</li>
    </div>

    <!-- v-for直接使用整数 -->
    <div id="app5">
        <span v-for="n in 10">{{ n }} </span>
    </div>

    <div id="app6">
        <ul>
            <template v-for="item in items">
                <li>{{ item.msg }}</li>
                <li class="divider" role="presentation"></li>
            </template>
        </ul>
    </div>
    <script src="vue.js"></script>
</body>
</html>